<template>
  <div id="app">
    <header>
      <van-nav-bar title="阿珍爱上了阿强" left-text="返回" left-arrow />
    </header>
    <main>
      <!-- 轮播 -->
      <van-swipe :autoplay="3000" class="demo-swipe">
        <van-swipe-item>1</van-swipe-item>
        <van-swipe-item>2</van-swipe-item>
        <van-swipe-item>3</van-swipe-item>
        <van-swipe-item>4</van-swipe-item>
      </van-swipe>
    </main>
    <footer>
      <van-tabbar v-model="active">
        <van-tabbar-item icon="wap-home">主页</van-tabbar-item>
        <van-tabbar-item icon="points" dot>会员</van-tabbar-item>
        <van-tabbar-item icon="cart" info="5">购物车</van-tabbar-item>
        <van-tabbar-item icon="aim">搜索</van-tabbar-item>
      </van-tabbar>
    </footer>
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => ({
    active:0
  }),
  methods: {}
};
</script>

<style>

.demo-swipe {
  padding-bottom: 30px;
}
.demo-swipe .van-swipe {
    cursor: pointer;
}
.demo-swipe .van-swipe-item {
      color: #fff;
      font-size: 20px;
      text-align: center;
      line-height: 150px
}
.demo-swipe .van-swipe-item:nth-child(even) {
  background-color: #39a9ed;
}
.demo-swipe .van-swipe-item:nth-child(odd) {
  background-color: #66c6f2;
}
.demo-swipe .van-swipe img {
      width: 100%;
      height: 240px;
      display: block;
      padding: 30px 60px;
      box-sizing: border-box;
      background-color: #fff;
      pointer-events: none;
}
.demo-swipe--vertical {
    height: 200px;
}
.demo-swipe--vertical .van-swipe-item {
      line-height: 200px;
}


</style>
